/*
 * @Author: your name
 * @Date: 2023-10-11 13:03:45
 * @LastEditTime: 2023-10-27 11:39:41
 * @LastEditors: Please set LastEditors
 * @Descripttion: In User Settings Edit
 * @FilePath: /bicycle-mobile-old/h5/src/pages/enterprisePublicity/index.jsx
 */
import React, { useEffect, useState } from 'react'
import styles from './index.less'
import { useDispatch, useSelector } from 'dva'
import ReturnIndex from "../../components/returnIndex"
import addIcon from '../../assets/info/addIcon.png';
import upIcon from '../../assets/info/upIcon.png';
import downIcon from '../../assets/info/downIcon.png';
import tooltip from '../../assets/info/tooltip.png';
import banner from '../../assets/info/banner.png';
import images from '../../assets/info/images.png';
import logo from '../../assets/info/logo.png';
import product from '../../assets/info/product.png';
import qrcode from '../../assets/info/qrcode.png';
import topImg from '../../assets/info/topImg.png';
import simple from '../../assets/info/simple.png'
import { ImagePicker } from 'antd-mobile';
import { Uploader, UploaderValueItem, Button, Form } from 'react-vant';
import { postFile } from '../../servers/service.js';
import ImgUploader from "../../components/ImgUploader"





function Index () {
  const dispatch = useDispatch()
  const {
    userInfo
  } = useSelector(({ index }) => index)

  let [exhibitorInfo, setExhibitorInfo] = useState({})
  let [openTab1, setOpenTab1] = useState(true)
  let [openTab2, setOpenTab2] = useState(true)

  let [fileList1, setFileList1] = useState([])
  let [fileList2, setFileList2] = useState([])
  let [fileList3, setFileList3] = useState([])
  let [fileList4, setFileList4] = useState([])
  let [fileList5, setFileList5] = useState([])
  let [fileList6, setFileList6] = useState([])

  const [form] = Form.useForm()


  const resetInfo = () => {
    let info = userInfo?.exhibitor
    setExhibitorInfo(info)

    if (info) {
      let arr1 = info.properties.logo.map((item) => {
        return { url: item }
      })
      setFileList1(arr1)
      let arr2 = info.properties.backgroundImage.map((item) => {
        return { url: item }
      })
      setFileList2(arr2)
      let arr3 = info.properties.coverImage.map((item) => {
        return { url: item }
      })
      setFileList3(arr3)
      let arr4 = info.properties.albums.map((item) => {
        return { url: item }
      })
      setFileList4(arr4)
      let arr5 = info.properties.qrcode.map((item) => {
        return { url: item }
      })
      setFileList5(arr5)
      let arr6 = info.properties.topImage.map((item) => {
        return { url: item }
      })
      setFileList6(arr6)

      form.setFieldsValue({
        file1: arr1,
        file2: arr2,
        file3: arr3,
        file4: arr4,
        file5: arr5,
        file6: arr6,
      })
    }
  }

  useEffect(() => {
    resetInfo()
  }, [userInfo])





  const onFinish = async () => {
    const values = await form.validateFields()
    // console.log(values)
    let { file1, file2, file3, file4, file5, file6 } = values
    let arr1 = file1.map((item) => {
      return item?.url
    })
    let arr2 = file2.map((item) => {
      return item?.url
    })
    let arr3 = file3.map((item) => {
      return item?.url
    })
    let arr4 = file4.map((item) => {
      return item?.url
    })
    let arr5 = file5.map((item) => {
      return item?.url
    })
    let arr6 = file6.map((item) => {
      return item?.url
    })

    let obj = {
      ...exhibitorInfo.properties,
      logo: arr1,
      backgroundImage: arr2,
      coverImage: arr3,
      albums: arr4,
      qrcode: arr5,
      topImage: arr6,
    }
    dispatch({
      type: 'index/apiPostExhibitor',
      payload: {
        ...exhibitorInfo,
        properties: obj,
        id: exhibitorInfo.id,
      },
      callback: (status) => {
        if (status) {
          let userObj = {
            ...userInfo,
            exhibitor: {
              ...exhibitorInfo,
              properties: obj,
            }

          }
          dispatch({
            type: 'index/setState',
            payload: {
              userInfo: userObj
            },
          });
        }
      }
    })
  }


  return (
    <div className={styles.page}>
      <ReturnIndex />
      <div className={styles.enterprisePublicity}>
        <Form
          colon
          form={form}
          footer={null}
        >
          {/* 展商主页宣传图 */}
          <div className={styles.titleContent}>
            <div>展商主页宣传图</div>
            <img className={styles.upIcon} src={!openTab1 ? downIcon : upIcon} onClick={() => {
              setOpenTab1(!openTab1)
            }} />
          </div>
          <div className={`${styles.imgView} ${openTab1 ? styles.showView : styles.hideView}`}
          >
            {/* logo图 */}
            <div className={styles.item}>
              <div className={styles.itemTitle}>logo图</div>
              <Form.Item
                label=''
                name='file1'
                style={{
                  padding: 0
                }}
              >
                <div className={styles.imgList}>
                  <div style={{ position: 'relative' }}>
                    <img src={logo} className={styles.img1} />
                    <img src={simple} className={styles.simpleIcon} />
                  </div>
                  <ImgUploader type={1} maxCount={1} value={fileList1} onChange={(val) => {
                    form.setFieldValue('file1', val)
                  }} />
                </div>
              </Form.Item>
              <div className={styles.tooltip}>建议图片尺寸：200*200</div>
            </div>
            {/* 展商/展品详情图-顶图 */}
            <div className={styles.item}>
              <div className={styles.itemTitle}>展商/展品详情图-顶图 <img src={tooltip} className={styles.tooltipImg} /></div>
              <div className={styles.tooltip}>官网，展品详情页顶部配图。可上传企业个性化宣传图增强宣传</div>
              <Form.Item
                label=''
                name='file2'
                style={{
                  padding: 0
                }}
              >
                <div className={styles.imgList}>
                  <div style={{ position: 'relative' }}>
                    <img src={banner} className={styles.img2} />
                    <img src={simple} className={styles.simpleIcon} />
                  </div>
                  <ImgUploader type={2} maxCount={1} value={fileList2} onChange={(val) => {
                    form.setFieldValue('file2', val)
                  }} />
                </div>
              </Form.Item>
              <div className={styles.tooltip}>建议图片尺寸：320*100px，大小不超过5M</div>
            </div>
            {/* 展商/展品详情图-配图 */}
            <div className={styles.item}>
              <div className={styles.itemTitle}>展商/展品详情图-配图 <img src={tooltip} className={styles.tooltipImg} /></div>
              <div className={styles.tooltip}>展商列表企业配图，上传企业专属配图，增强</div>

              <Form.Item
                label=''
                name='file3'
                style={{
                  padding: 0
                }}
              >
                <div className={styles.imgList}>
                  <div style={{ position: 'relative' }}>
                    <img src={product} className={styles.img2} />
                    <img src={simple} className={styles.simpleIcon} />
                  </div>
                  <ImgUploader type={2} maxCount={1} value={fileList3} onChange={(val) => {
                    form.setFieldValue('file3', val)
                  }} />
                </div>
              </Form.Item>
              <div className={styles.tooltip}>建议图片尺寸：320*100px，大小不超过5M</div>
            </div>

            {/* 图集 */}
            <div className={styles.item} style={{ marginBottom: 24 }}>
              <div className={styles.itemTitle}>图集 <img src={tooltip} className={styles.tooltipImg} /></div>
              <div className={styles.tooltip}>官网，H5展商详情页的企业介绍轮播图，建议上传企业产品、企业宣传的高清大图</div>

              <Form.Item
                label=''
                name='file4'
                style={{
                  padding: 0
                }}
              >
                <div className={styles.imgList}>
                  {/* <div style={{ position: 'relative' }}>
                    <img src={images} className={styles.img2} />
                    <img src={simple} className={styles.simpleIcon} />
                  </div> */}
                  <ImgUploader type={3} maxCount={100} value={fileList4} onChange={(val) => {
                    form.setFieldValue('file4', val)
                  }} />
                </div>
              </Form.Item>
              <div className={styles.tooltip}>建议图片尺寸：320*100px，大小不超过5M</div>
            </div>
          </div>
          {/* 展商分享图 */}
          <div className={styles.titleContent} >
            <div>展商分享图</div>
            <img className={styles.upIcon} src={!openTab2 ? downIcon : upIcon} onClick={() => {
              setOpenTab2(!openTab2)
            }} />
          </div>
          {/* 展商分享图-二维码 */}
          <div className={`${styles.imgView} ${openTab2 ? styles.showView : styles.hideView}  `}
          >
            <div className={styles.item}>
              <div className={styles.itemTitle}>展商分享图-二维码</div>
              <div className={styles.tooltip}>上传企业公众号/小程序/H5等自媒体二维码，企业宣传海报上的二维码将替换成企业的专属二维码</div>

              <Form.Item
                label=''
                name='file5'
                style={{
                  padding: 0
                }}
              >
                <div className={styles.imgList}>
                  <div style={{ position: 'relative' }}>
                    <img src={qrcode} className={styles.img1} />
                    <img src={simple} className={styles.simpleIcon} />
                  </div>
                  <ImgUploader type={1} maxCount={1} value={fileList5} onChange={(val) => {

                    form.setFieldValue('file5', val)
                  }} />
                </div>
              </Form.Item>
              <div className={styles.tooltip}>建议图片比例：1:1，大小不超过5M</div>
            </div>
            {/* 展商/展品详情图-顶图 */}
            <div className={styles.item}>
              <div className={styles.itemTitle}>展商/展品详情图-顶图 <img src={tooltip} className={styles.tooltipImg} /></div>
              <div className={styles.tooltip}>上传企业定制顶图，企业宣传海报上的顶图将替换成企业的专属宣传图</div>
              <Form.Item
                label=''
                name='file6'
                style={{
                  padding: 0
                }}
              >
                <div className={styles.imgList}>
                  <div style={{ position: 'relative' }}>
                    <img src={topImg} className={styles.img2} />
                    <img src={simple} className={styles.simpleIcon} />
                  </div>
                  <ImgUploader type={2} maxCount={1} value={fileList6} onChange={(val) => {

                    form.setFieldValue('file6', val)
                  }} />
                </div>
              </Form.Item>
              <div className={styles.tooltip}>建议图片尺寸：200*100px，大小不超过5M</div>
            </div>
          </div>


          <div className={`${styles.flewRow}`}>
            <div className={`${styles.editBtn} ${styles.cancelBtn}`} onClick={() => {
              resetInfo()
            }}>取消</div>
            <div className={styles.editBtn} onClick={onFinish}>保存</div>

          </div>
        </Form>
      </div>
    </div>
  )
}

export default Index
